import React from "react";
import { TopnavContainer } from "./style";

export default function Topnav(props) {
    const changeHandle = (currentIndex)=>{
        props.setTopCurrentIndex(currentIndex)
    }
  return (
    <TopnavContainer>
      <ul>
        <li onClick={()=>changeHandle(0)} className={props.topCurrentIndex === 0 ? "active" : ""}>分类</li>
        <li onClick={()=>changeHandle(1)} className={props.topCurrentIndex === 1 ? "active" : ""}>食材</li>
        <li  className={props.topCurrentIndex === 0 ? "slider" : "slider right"}></li>
      </ul>
    </TopnavContainer>
  );
}



